<template>
    <div id="app">
        <router-view />
    </div>
</template>
<script>
    import { on, off } from 'view-design/src/utils/dom';
    import { setMatchMedia } from 'view-design/src/utils/assist';
    import cookies from "@/libs/util.cookies";
    import { mapMutations, mapState } from 'vuex';
    // const io=require("socket.io-client");

    setMatchMedia();


    export default {
        name: 'app',
      computed: {
        ...mapState("admin/websoket", ['isWebSoket'])
      },
        watch: {
          isWebSoket:function(newValue,oldValue){
            this.initsoket()
          }
        },
        methods: {

            ...mapMutations('admin/layout', [
                'setDevice'
            ]),
            initsoket(){
              if(this.isWebSoket){
                this.createWebSoket&&this.createWebSoket();
              }else{
                window.socket=null;
              }
            },
            handleWindowResize () {
                this.handleMatchMedia();
            },
            handleMatchMedia () {
                const matchMedia = window.matchMedia;

                if (matchMedia('(max-width: 600px)').matches) {
                    this.setDevice('Mobile');
                } else if (matchMedia('(max-width: 992px)').matches) {
                    this.setDevice('Tablet');
                } else {
                    this.setDevice('Desktop');
                }
            },
          createWebSoket(){

            let jwt = cookies.get('token');
            // const token = storage.get(ACCESS_TOKEN);
            let url = 'wss://www.whulan.com/imserver/' + jwt;
            // let url='ws://121.5.35.75:8080/imserver/'+'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjoie1wib3JnSWRzXCI6XCIxMDAwMDAwMDAwMDAwMDAwXCIsXCJwaG9uZVwiOlwiMTM2OTY3NjYzMjRcIixcIm5hbWVcIjpcIui2hee6p-euoeeQhuWRmFwiLFwiaWRcIjpcIjIwMDAwMDAwMDAwMDAwMDAwXCIsXCJ0eXBlXCI6XCJBRE1JTlwiLFwiZW1haWxcIjpudWxsLFwib3JnSWRcIjpcIjEwMDAwMDAwMDAwMDAwMDBcIixcInVzZXJuYW1lXCI6XCJhZG1pblwifSIsImV4cCI6MTY2NTE5MzIzNywiaWF0IjoxNjMzNjU3MjM3fQ.czsj6cbF8xLM4Hz-ToTss_iHb0mcAmZuLuakwCXrZR8';

            if (typeof (WebSocket) == "undefined") {
              console.log("遗憾：您的浏览器不支持WebSocket");
            } else {
              console.log("恭喜：您的浏览器支持WebSocket");
              //实现化WebSocket对象
              //指定要连接的服务器地址与端口建立连接
              //注意ws、wss使用不同的端口。我使用自签名的证书测试，
              //无法使用wss，浏览器打开WebSocket时报错
              //ws对应http、wss对应https。
              window.socket = new WebSocket(url);
              //连接打开事件
              socket.onopen = function () {
                console.log("Socket 已打开");
//          socket.send("消息发送测试(From Client)");
              };
              //收到消息事件
              window.socket.onmessage = function (msg) {
                console.log(msg,'=====msg=====');
                if(_.get(msg,'message_type')==1000){
                  this.$store.commit('admin/websoket/changeData',{name:'websoketData',value:_.get(msg,'content')});
                }

              };
              //连接关闭事件
              window.socket.onclose = function () {
                console.log("Socket已关闭");
              };
              //发生了错误事件
              window.socket.onerror = function () {
                alert("Socket发生了错误");
              }
              //窗口关闭时，关闭连接
              window.unload = function () {
                window.socket.close();
              };
            }
          }
        },
        mounted () {
            on(window, 'resize', this.handleWindowResize);
            this.handleMatchMedia();
          this.initsoket()
          // document.getElementsByTagName('body')[0].classList.add('ivu-theme-dark');
        },
        beforeDestroy () {
            off(window, 'resize', this.handleWindowResize);
        },
    }
</script>
